import React, { Component, PropTypes} from "react";
import { Button } from 'antd';

export default class Table extends Component {
  render() {
    const { data, keys, styles, operations } = this.props;
    return (
      <div className={styles.Table}>
        <div style={{display: 'flex'}}>
          {
            keys.map(k => (
              <span className={styles.TableHeader}>{k.display}</span>
            ))
          }
          {
            operations
              ?
              <span className={styles.TableHeader}>操作</span>
              :
              null
          }
        </div>
        {
          data.map((d, i) => {
            console.log(d)
            return (
              <div style={{display: 'flex', background: i % 2 === 0 ? 'white' : '#eee'}}>
                {
                  keys.map(k => (
                    <span
                      className={styles.TableCell}
                      onClick={k.onClick ? () => k.onClick(d.node) : null}
                    >{d[k.name] !== undefined ? d[k.name] : d.node[k.name]}</span>
                  ))
                }
                {
                  operations
                    ?
                    operations.map(operation => (
                      <Button
                        type={operation.type || 'default'}
                        size="small"
                        style={{height: '20px', marginTop: '10px'}}
                        onClick={() => operation.callback(d.node || d)}
                      >{
                        typeof operation.title === 'function'
                          ?
                          operation.title(d.node || d)
                          :
                          operation.title}</Button>
                    ))
                    :
                    null
                }
              </div>
            )
          })
        }
      </div>

    )
  }
}

Table.contextTypes = {
  router: PropTypes.object
}
